<template>
  <div id="footer">
    <my-audio></my-audio>
  </div>
</template>

<script>
import MyAudio from '../Player/MyAudio';

// import { mapState } from 'vuex';
// import { formatTime } from '@/utils/figure';
// import { musicUrl } from '@/api/music';
// import { Drawer } from 'ant-design-vue';
// import MyList from '@/components/Detail/List';
// import Slider from '../Library/Slider';
// import AudioPlayer from '../Player/AudioPlayer';
// import PlayInfo  from '../Detail/PlayInfo';

export default {
  name: 'Footer',
  components: {
    MyAudio
  }
  // components: {
  //   MyList,
  //   PlayInfo,
  //   AudioPlayer,
  //   ASlider: Slider,
  //   ADrawer: Drawer,
  // },

  // provide() {
  //   return {
  //     // 因为provide/inject传值不是响应式,这样写可以解决响应式问题
  //     isRotato: () => this.isPlay,
  //     timeChange: () => this.currentTime,
  //     // 孙子组件通过该事件显示隐藏Modal
  //     isModal: this.controlModal
  //   }
  // },

  // data() {
  //   return {
  //     // 显示隐藏抽屉
  //     visible: false,
  //     placement: 'right',
  //     columns: [
  //       {
  //         title: '',
  //         dataIndex: 'index',
  //         key: 'index',
  //         width: 30,
  //         scopedSlots: { customRender: 'key' }
  //       },
  //       {
  //         title: '音乐标题',
  //         dataIndex: 'name',
  //         key: 'name',
  //         ellipsis: true,
  //         scopedSlots: { customRender: 'name' }
  //       },
  //       {
  //         title: '歌手',
  //         dataIndex: 'ar',
  //         key: 'ar',
  //         width: 150,
  //         ellipsis: true,
  //         scopedSlots: { customRender: 'ar' }
  //       },
  //       {
  //         title: '时长',
  //         dataIndex: 'duration',
  //         key: 'duration',
  //         ellipsis: true,
  //         width: 80,
  //         scopedSlots: { customRender: 'duration' }
  //       },
  //     ],
  //     // 是否禁用
  //     disabled: true,
  //     // inputValue1: 1,
  //     // 控制播放按钮显示隐藏
  //     isPlay: false,
  //     // 判断是循环播放(1)、单曲循环(2)或随机播放(3),默认循环播放
  //     playType: 1,
  //     // 是否禁音播放
  //     banVolume: false,
  //     // 控制音量控制框
  //     volumeModal: false,
  //     // 控制音量大小
  //     volume: 50,
  //     // 音乐地址
  //     musicUrl: '',
  //     // 播放时间
  //     currentTime: 0,
  //     // 播放总时长
  //     duration: 0,
  //     // music信息
  //     music: {},
  //     // 滑块值
  //     sliderVal: 0,
  //     // 控制歌词弹框显示隐藏
  //     showLyric: false
  //   };
  // },

  // computed: {
  //   ...mapState({
  //     audioList: state => state.detail.audioList,
  //     audioId: state => state.detail.audioId,
  //     isPlayed: state => state.main.isPlayed
  //   }),
  //   isMusic() {
  //     // return this.music && Object.keys(this.music).length
  //     return this.audioId && Object.keys(this.audioId).length;
  //   },
  //   // 格式化后起始时间
  //   curTime() {
  //     const time = formatTime(this.currentTime);
  //     return `${time.min}:${time.max}`;
  //     //   console.log(value);
  //     //   // 避免重复给isPlay赋值true,只需要改变一次状态
  //     //   if (value !== '00:00' && this.isPlay) {
  //     //     this.isPlay = false;
  //     //     // return;
  //     //   }
  //     //   this.isPlay = true;
  //     // }
  //   },
  //   // 格式化后总时间
  //   durTime() {
  //     const time = formatTime(this.duration);
  //     return `${time.min}:${time.max}`;
  //   },
  //   minTime() {
  //     return Math.floor(this.currentTime);
  //   },
  //   maxTime() {
  //     return Math.floor(this.duration);
  //   },
  //   // audio
  //   audioRef() {
  //     return this.$refs.player.$refs.playerBox;
  //   }
  // },

  // watch: {
  //   audioId: {
  //     handler(value) {
  //       this.reduceMusic(value);
        
  //     }
  //     // deep: true
  //   },
  //   // 判断是否需要立即播放歌曲
  //   isPlayed: {
  //     handler(value) {
  //       if (value) {
  //         this.getMusicUrl();
  //       }
  //     },
  //     deep: true
  //   }
  // },

  // methods: {
  //   // 时长发生了变化
  //   ondurationchange(info) {
  //     this.duration = info;
  //     // 存储当前播放歌曲信息
  //     localStorage.setItem('currentSong', JSON.stringify(this.audioId));
  //     // 存储当前播放列表
  //     localStorage.setItem('recentPlay', JSON.stringify(this.audioList));
  //   },
  //   // 开始播放音乐事件
  //   oncanplay() {
  //     console.log('我播放啦');
  //     // if (!this.isPlay) this.isPlay = true;
  //     this.disabled = false;
  //     this.audioRef.volume = 0.5;
  //   },
  //   // 播放位置发生了变动
  //   ontimeupdate(time) {
  //     this.sliderVal = this.minTime;
  //     this.currentTime = time;
  //   },
  //   // 滑块移动时
  //   changeValue(value) {
  //     this.sliderVal = value;
  //     this.currentTime = value;
  //     // 修改audio的当前播放时间
  //     this.audioRef.currentTime = value;
  //     // 拖动滑块时,如果播放按钮为true需要改变一次状态
  //     // if (!this.isPlay) {
  //     //   this.isPlay = true;
  //     //   // console.log(this.audioRef.play);
  //     //   // this.audioRef.play();
  //     // }
  //   },
  //   // 处理歌曲基本信息
  //   reduceMusic(value) {
  //     let base = null;
  //     if (value && value.album) {
  //       base = {
  //         id: value.id,
  //         singerName: value.artists,
  //         songImg: value.album.picUrl,
  //         songName: `${value.name}${value.alias && value.alias.length ? `（${this.audioId.alias[0]}）` : ''}`
  //       };
  //     } else {
  //       base = {
  //         id: value.id,
  //         singerName: value.ar,
  //         songImg: value.al.picUrl,
  //         songName: `${value.name}${value.alia && value.alia.length ? `（${this.audioId.alia[0]}）` : ''}`
  //       };
  //     }
  //     this.music = base;
  //   },
  //   // 点击上一首、下一首或播放
  //   playMusic(type) {
  //     const current =
  //       this.audioList.findIndex(item => item.id == this.audioId.id);
  //     if (current === -1) return;
  //     switch(type) {
  //       case 'next':
  //         if (!this.play) {
  //           this.isPlay = true;
  //         }
  //         // 当前播放列表最后一首,需重头开始循环
  //         if (current === this.audioList.length - 1) {
  //           const h = this.$createElement;
  //           this.$message.open({
  //             icon: h('a-icon', {
  //               props: {
  //                 type: 'coffee'
  //               }
  //             }),
  //             content: '当前歌曲为播放列表最后一首,即将为你重新播放'
  //           });
  //           // this.audioRef.src = 
  //           this.$store.commit('detail/AUDIOID', this.audioList[0]);
  //         } else {
  //           this.$store.commit('detail/AUDIOID', this.audioList[current + 1]);
  //         }
  //         this.getMusicUrl();
  //         break;
  //       case 'prev':
  //         if (!this.play) {
  //           this.isPlay = true;
  //         }
  //         if (current === 0) {
  //           this.$store.commit('detail/AUDIOID', this.audioList[this.audioList.length - 1]);
  //         } else {
  //           this.$store.commit('detail/AUDIOID', this.audioList[current - 1]);
  //         }
  //         this.getMusicUrl();
  //         break;
  //       default:
  //         this.isPlay = !this.isPlay;
          
  //         if (this.duration) {
  //           this.isPlay ? this.audioRef.play() : this.audioRef.pause();
  //         } else {
  //           this.getMusicUrl();
  //           // this.audioRef.play()
  //         }
  //     }
  //   },
  //   // 切换播放模式
  //   changePlayType() {
  //     if (this.playType === 3) {
  //       this.playType = 1;
  //       return;
  //     }
  //     this.playType++;
  //   },
  //   // 禁音操作
  //   banNotes(e) {
  //     e.stopPropagation();
  //     this.banVolume = !this.banVolume;
  //     this.audioRef.muted = this.banVolume;
  //     if (!this.banVolume) {
  //       this.audioRef.volume = .5;
  //       this.volume = 50;
  //       return;
  //     }
  //     this.audioRef.volume = 0;
  //     this.volume = 0;
  //   },
  //   // 改变音量大小
  //   changeVolume(value) {
  //     this.volume = value;
  //     // audio中的volume取值只能0-1这个范围
  //     this.audioRef.volume = value / 100;
  //     if (!value) {
  //       this.banVolume = true;
  //       return;
  //     }
  //     this.banVolume = false;
  //   },
  //   // 展开侧边展示
  //   showPlayerList() {
  //     this.visible = true;
  //   },
  //   // 是否显示歌词弹框
  //   controlModal(show) {
  //     this.showLyric = show;
  //   },
  //   // 跳转到专辑详情,该方法由playInfo组件传递过来
  //   goAlbum() {
  //     this.$router.push({
  //       name: 'albumdetail',
  //       query: {
  //         id: this.audioId.al ? this.audioId.al.id : this.audioId.album.id
  //       }
  //     });
  //     this.showLyric = false;
  //   },
  //   // 获取播放歌曲
  //   async getMusicUrl() {
  //     const res = (await musicUrl(this.audioId.id)).data;
  //     if (res.code !== 200) return this.$message.error('播放失败');
  //     if (!res.data[0].url) {
  //       this.$message.warning('因版权方要求，该资源暂时无法播放，我们正在争取歌曲回归');
  //       // this.musicUrl = '';
  //       this.audioRef.src = '';
  //       return;
  //     }
  //     // this.musicUrl = res.data[0].url;
  //     this.audioRef.src = res.data[0].url;
  //   },
  //   onClose() {}
  // },

  // created() {
  //   // 刷新页面保留上次播放歌曲
  //   this.$nextTick(() => {
  //     const song = JSON.parse(localStorage.getItem('currentSong'));
  //     const list = JSON.parse(localStorage.getItem('recentPlay'));
  //     // if (song && Object.keys(song).length) {
        
  //     // 如果是第一次进入,不进行播放
  //     // this.reduceMusic(song);
  //     this.$store.commit('main/ISPLAYED', false);
  //     this.$store.commit('detail/AUDIOID', song);
  //     this.$store.commit('detail/AUDIOLIST', list);
  //     // }
  //   });
  // }
};
</script>

<style lang="less" scoped>
// #footer {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   height: 100%;
//   .player-left {
//     width: 25%;
//     display: flex;
//     align-items: center;
//     // justify-content: center;
//     img {
//       width: 50px;
//       height: 50px;
//       border-radius: 5px;
//       cursor: pointer;
//     }
//     .player-info {
//       display: flex;
//       margin-left: 10px;
//       flex-direction: column;
//       justify-content: center;
//       align-items: flex-start;
//     }
//     .singer-name>span {
//       &::after {
//         content: '/';
//         display: inline-block;
//       }
//       &:last-child::after {
//         display: none;
//       }
//     }
//   }
//   .player-center {
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     width: 50%;
//     .player-bar {
//       width: 300px;
//       // margin: 0 auto;
//       display: flex;
//       justify-content: space-around;
//       // align-items: center;
//       // margin-top: 6px;
//       button {
//         background: unset;
//         border: none;
//         cursor: pointer;
//         i {
//           font-size: 18px;
//           &:hover {
//             color: #ec4141;
//           }
//         }
//       }
//       .iconfont:hover {
//         color: #ec4141;
//       }
//       .disabled-color {
//         color: #9b9b9b;
//         cursor: default;
//       }
//     }
//     // .player-progress {
//     //   display: flex;
//     //   align-items: center;
//     //   /deep/.ant-slider {
//     //     width: 400px;
//     //     // height: 3px !important;
//     //     margin: 0 10px;
//     //   }
//     // }
//   }
//   .player-right {
//     width: 30%;
//     display: flex;
//     justify-content: flex-end;
//     button {
//       position: relative;
//       background: unset;
//       border: none;
//       cursor: pointer;
//       margin-right: 30px;
//       &:last-child {
//         margin-right: 0;
//       }
//       i {
//         font-size: 24px;
//       }
//       .hover-modal {
//         position: absolute;
//         top: -115px;
//         left: -50%;
//         width: 45px;
//         background: rgb(255, 255, 255);
//         // height: 300px;
//         box-shadow: rgb(136 136 136) 0px 2px 10px;
//         border-radius: 5px;
//         z-index: 1000;
//         &::after {
//           content: '';
//           /* display: block; */
//           position: absolute;
//           /* margin-left: 10px; */
//           width: 0;
//           height: 0;
//           left: 50%;
//           transform: translateX(-50%);
//           bottom: -10px;
//           border-width: 6px;
//           border-style: solid;
//           /* box-shadow: #888888 0px 2px 10px; */
//           /* border-radius: 3px; */
//           border-color: #fff transparent transparent transparent;
//         }
//       }
//     }
//   }
//   // div {
//   //   &:last-child {
//   //     display: contents;
//   //   }
//   // }
//   // 抽屉内样式
//   .list-header {
//     display: flex !important;
//     justify-content: space-around;
//     align-items: center;
//     .total-song {
//       color: #cfcfcf;
//     }
//   }
// }
</style>
<style lang="less" scoped>
#footer {
  width: 100%;
  height: 100%;
  // /deep/.ant-drawer-header {
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   border-bottom: none;
  //   padding: 24px 10px !important;
  // }
  // /deep/.ant-drawer-body {
  //   height: calc(100vh - 80px);
  //   overflow-y: auto;
  //   padding: 10px !important;
  // }
  // /deep/.ant-table {
  //   margin-top: 30px;
  //   border-top: 1px solid #e6e6e6;
  // }
  // /deep/.ant-table-placeholder {
  //   padding: 50px 0;
  //   border-top: none;
  // }
  // /deep/.ant-table-tbody > tr > td {
  //   border-bottom: none;
  // }
}
</style>